<template>
  <div class="coupon">
    <input id="demoInput123213213213sfs" v-model="item.password" readonly />
    <div class="pic">
      <van-image fit="cover" height="300" :src="item.image" />
    </div>
    <div class="info">
      <div class="title">
        <van-row>
          <van-col span="24">
            <van-tag class="middle" style="padding: 1px 3px;margin-right: 8px" type="danger">{{item.shopType}}</van-tag>
            <span class="middle">{{item.title}}</span>
          </van-col>
        </van-row>
        <van-row class="price">
          <van-col span="24" v-if="item.coupon">
            <van-tag
              plain
              class="middle"
              style="font-size: 15px;padding: 2px 2px;"
              type="danger"
            >券后价</van-tag>
            <span style="vertical-align: sub;margin-left: 8px">¥</span>
            <span class="middle" style="font-size: 25px;">{{item.price}}</span>
          </van-col>
        </van-row>
        <van-row class="sub">
          <van-col span="12">
            现价
            <span v-if="item.coupon" style="text-decoration:line-through;"> ¥{{item.originalPrice}}</span>
            <span v-else class="price"> ¥{{item.price}}</span>
          </van-col>
          <van-col span="12" style="text-align: right;">已售{{item.volume}}件</van-col>
        </van-row>
      </div>
      <div class="content">
        <van-row v-if="item.coupon">
          <van-col span="2" style="text-align: center;">
            <van-icon name="coupon-o" />
          </van-col>
          <van-col span="22">
            优惠券
            <span class="price">{{item.coupon.amount}}元</span>
            <span class="sub">（满{{item.coupon.startFee}}使用）</span>
          </van-col>
        </van-row>
        <van-row>
          <van-col span="2" style="text-align: center;">
            <van-icon name="gold-coin-o" />
          </van-col>
          <van-col span="22">
            返利
            <span class="price">{{item.rebate}}元</span><span class="sub">（预计）</span>
          </van-col>
        </van-row>
        <!-- <van-row>
          <van-col span="22" offset="2" class="price">晋升到高级，返利预计为¥7.45，加油哦！</van-col>
        </van-row>-->
        <van-row>
          <van-col span="22" offset="2">淘口令：<span class="sub">{{item.password}}</span></van-col>
        </van-row>
      </div>
    </div>

    <van-goods-action>
      <van-goods-action-button type="danger" color="#ff3030" text="复制淘口令" @click="onCopy" />
    </van-goods-action>

    <!-- <van-divider>相似商品</van-divider> -->

    <!-- <coupon-good-item
      pic="http://img3.imgtn.bdimg.com/it/u=3404129581,3734062752&fm=26&gp=0.jpg"
    />
    <coupon-good-item
      pic="http://pic3.16pic.com/00/01/11/16pic_111395_b.jpg"
    />-->
  </div>
</template>



<script>
import { Base64 } from "js-base64";

import {
  Image,
  Row,
  Col,
  Tag,
  Divider,
  Icon,
  GoodsAction,
  GoodsActionButton
} from "vant";
export default {
  name: "CouponInfo",
  components: {
    CouponGoodItem,
    [Row.name]: Row,
    [Col.name]: Col,
    [Image.name]: Image,
    [Tag.name]: Tag,
    [Divider.name]: Divider,
    [Icon.name]: Icon,
    [GoodsAction.name]: GoodsAction,
    [GoodsActionButton.name]: GoodsActionButton
  },
  data() {
    return { item: {} };
  },
  methods: {
    onCopy() {
      let input = document.querySelector("#demoInput123213213213sfs");
      input.focus();
      input.setSelectionRange(0, 100);
      if (document.execCommand("copy")) {
        this.$toast("淘口令已复制，请打开手机淘宝使用");
      } else {
        this.$toast("淘口令复制失败");
      }
      input.blur();
    }
  },
  beforeRouteEnter(to, from, next) {
    next(vm => {
      if (!to.query.q) {
        vm.$router.push("/");
        return;
      }
      vm.item = JSON.parse(Base64.decode(to.query.q));
    });
  }
};
</script>



<style scoped>
.pic img {
  width: 100%;
}

.title {
  padding: 4px 8px;
}

.middle {
  vertical-align: middle;
}

.sub {
  color: #bbb;
  font-size: 13px;
}

.content {
  padding: 8px 8px 0 8px;
  font-size: 13px;
  background-color: #f3f3f3;
  color: #413d3d;
}

.price {
  color: red;
}

.van-col {
  margin-bottom: 8px;
}

.van-goods-action {
  z-index: 1000;
}

#demoInput123213213213sfs {
  position: absolute;
  left: -1000px;
  z-index: -1000;
}
</style>